<template>
  <common-card 
    title="累计订单量"
    value="2,157,420"
  >
    <template>
      <v-chart :options="getOptions()" />
    </template>
    <template #footer>
      <span>昨日订单量</span>
      <span class="emphasis">￥ 32,039,165</span>
    </template>
  </common-card>
</template>

<script>
import commonCardMixin from "@/mixins/commonCardMixin.js"
export default {
  mixins: [commonCardMixin],
  methods: {
    getOptions() {
      return {
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false, //默认值为true，图表距x轴两侧有间距，该为false就没有间距了
        },
        yAxis: {
          show: false
        },
        series: [
          {
            type: "line",
            data: [620, 432, 220, 534, 790, 430, 220, 320, 532, 834, 690, 530, 220, 620],
            areaStyle: { // 显示面积
              color: 'purple', //面积颜色
            },
            lineStyle: {
              width: 0, //线的宽度为0
            },
            itemStyle: {
              opacity: 0, //把item透明度设置为0，就是线段上的点
            },
            smooth: true, // 线条变平滑
          }
        ],
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }
      }
    }
  },
}
</script>

<style>

</style>